<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>军事数据加工平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 16px;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .section h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 24px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group input[type="file"],
        .form-group input[type="number"],
        .form-group input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background: #218838;
            transform: translateY(-2px);
        }
        
        .btn-info {
            background: #17a2b8;
            color: white;
        }
        
        .btn-info:hover {
            background: #138496;
            transform: translateY(-2px);
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            display: none;
        }
        
        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            display: block;
        }
        
        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            display: block;
        }
        
        .result.info {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
            display: block;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .loading.show {
            display: block;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #667eea;
        }
        
        .stat-card h3 {
            color: #667eea;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .stat-card .number {
            font-size: 32px;
            font-weight: bold;
            color: #333;
        }
        
        .api-info {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .api-info h3 {
            color: #856404;
            margin-bottom: 10px;
        }
        
        .api-info code {
            background: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎖️ 军事数据加工平台</h1>
            <p>Military Data Processing Platform</p>
        </div>
        
        <div class="content">
            <!-- 系统状态 -->
            <div class="section">
                <h2>📊 系统状态</h2>
                <button class="btn btn-info" onclick="checkHealth()">检查系统健康状态</button>
                <button class="btn btn-info" onclick="getStatistics()">获取审核统计</button>
                <div id="healthResult" class="result"></div>
                <div id="statsContainer" class="stats"></div>
            </div>
            
            <!-- 数据导入 -->
            <div class="section">
                <h2>📥 数据导入</h2>
                <div class="form-group">
                    <label>1. 下载模板</label>
                    <button class="btn btn-primary" onclick="downloadTemplate()">下载 Excel 模板</button>
                </div>
                
                <div class="form-group">
                    <label>2. 上传填写好的 Excel 文件</label>
                    <input type="file" id="excelFile" accept=".xlsx,.xls">
                </div>
                
                <button class="btn btn-success" onclick="uploadExcel()">开始导入</button>
                
                <div class="loading" id="importLoading">
                    <div class="spinner"></div>
                    <p>正在导入数据，请稍候...</p>
                </div>
                <div id="importResult" class="result"></div>
            </div>
            
            <!-- 数据处理 -->
            <div class="section">
                <h2>⚙️ 数据处理</h2>
                <div class="form-group">
                    <label>每批处理数量</label>
                    <input type="number" id="batchSize" value="10" min="1" max="50">
                </div>
                
                <button class="btn btn-primary" onclick="processBatch()">处理一批数据</button>
                <button class="btn btn-success" onclick="processAll()">处理所有数据</button>
                <button class="btn btn-info" onclick="getPendingRecords()">查看待处理列表</button>
                
                <div class="loading" id="processLoading">
                    <div class="spinner"></div>
                    <p>正在处理数据，请稍候...</p>
                </div>
                <div id="processResult" class="result"></div>
            </div>
            
            <!-- 数据审核 -->
            <div class="section">
                <h2>✅ 数据审核</h2>
                <button class="btn btn-primary" onclick="getPendingAudit()">获取待审核列表</button>
                <div id="auditResult" class="result"></div>
                
                <div class="api-info">
                    <h3>📌 审核说明</h3>
                    <p>由于审核功能涉及具体记录的查看和操作，建议使用 API 接口或开发专门的审核界面。</p>
                    <p>审核接口: <code>POST /api/audit/submit</code></p>
                </div>
            </div>
            
            <!-- API文档 -->
            <div class="section">
                <h2>📖 API 文档</h2>
                <div class="api-info">
                    <p><strong>基础地址:</strong> <code id="apiBase">http://localhost:3000</code></p>
                    <p><strong>完整文档:</strong> 请查看项目根目录的 <code>README.md</code> 和 <code>快速开始指南.md</code></p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const API_BASE = window.location.origin;
        document.getElementById('apiBase').textContent = API_BASE;
        
        // 显示结果
        function showResult(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.className = `result ${type}`;
            element.innerHTML = message;
        }
        
        // 隐藏结果
        function hideResult(elementId) {
            const element = document.getElementById(elementId);
            element.style.display = 'none';
        }
        
        // 显示/隐藏加载动画
        function showLoading(elementId, show = true) {
            const element = document.getElementById(elementId);
            if (show) {
                element.classList.add('show');
            } else {
                element.classList.remove('show');
            }
        }
        
        // 检查健康状态
        async function checkHealth() {
            try {
                const response = await fetch(`${API_BASE}/health`);
                const data = await response.json();
                
                const message = `
                    <strong>系统状态:</strong> ${data.status}<br>
                    <strong>数据库:</strong> ${data.database}<br>
                    <strong>时间:</strong> ${new Date(data.timestamp).toLocaleString('zh-CN')}
                `;
                
                showResult('healthResult', message, data.database === 'connected' ? 'success' : 'error');
            } catch (error) {
                showResult('healthResult', `错误: ${error.message}`, 'error');
            }
        }
        
        // 获取统计信息
        async function getStatistics() {
            try {
                const response = await fetch(`${API_BASE}/api/audit/statistics`);
                const data = await response.json();
                
                if (data.success) {
                    const stats = data.statistics;
                    const container = document.getElementById('statsContainer');
                    container.innerHTML = `
                        <div class="stat-card">
                            <h3>总记录数</h3>
                            <div class="number">${stats.total}</div>
                        </div>
                        <div class="stat-card">
                            <h3>待审核</h3>
                            <div class="number">${stats.pending_audit}</div>
                        </div>
                        <div class="stat-card">
                            <h3>已通过</h3>
                            <div class="number">${stats.approved}</div>
                        </div>
                        <div class="stat-card">
                            <h3>已驳回</h3>
                            <div class="number">${stats.rejected}</div>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('获取统计失败:', error);
            }
        }
        
        // 下载模板
        function downloadTemplate() {
            window.location.href = `${API_BASE}/api/import/template`;
        }
        
        // 上传Excel
        async function uploadExcel() {
            const fileInput = document.getElementById('excelFile');
            const file = fileInput.files[0];
            
            if (!file) {
                showResult('importResult', '请选择要上传的 Excel 文件', 'error');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            
            showLoading('importLoading', true);
            hideResult('importResult');
            
            try {
                const response = await fetch(`${API_BASE}/api/import/excel`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const message = `
                        <strong>✓ 导入成功!</strong><br>
                        总行数: ${data.totalRows}<br>
                        成功: ${data.successCount}<br>
                        失败: ${data.failCount}
                    `;
                    showResult('importResult', message, 'success');
                    fileInput.value = '';
                } else {
                    showResult('importResult', `✗ 导入失败: ${data.message}`, 'error');
                }
            } catch (error) {
                showResult('importResult', `✗ 错误: ${error.message}`, 'error');
            } finally {
                showLoading('importLoading', false);
            }
        }
        
        // 批量处理
        async function processBatch() {
            const batchSize = parseInt(document.getElementById('batchSize').value);
            
            showLoading('processLoading', true);
            hideResult('processResult');
            
            try {
                const response = await fetch(`${API_BASE}/api/process/batch`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ batchSize })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const message = `
                        <strong>✓ 处理完成!</strong><br>
                        总数: ${data.totalCount}<br>
                        成功: ${data.successCount}<br>
                        失败: ${data.failCount}
                    `;
                    showResult('processResult', message, 'success');
                } else {
                    showResult('processResult', `处理结果: ${data.message}`, 'info');
                }
            } catch (error) {
                showResult('processResult', `✗ 错误: ${error.message}`, 'error');
            } finally {
                showLoading('processLoading', false);
            }
        }
        
        // 处理所有
        async function processAll() {
            const batchSize = parseInt(document.getElementById('batchSize').value);
            
            if (!confirm('确定要处理所有待处理数据吗？这可能需要较长时间。')) {
                return;
            }
            
            showLoading('processLoading', true);
            hideResult('processResult');
            
            try {
                const response = await fetch(`${API_BASE}/api/process/all`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ batchSize })
                });
                
                const data = await response.json();
                
                showResult('processResult', 
                    `✓ ${data.message}<br>处理任务已在后台运行，请稍后刷新页面查看统计信息。`, 
                    'info');
            } catch (error) {
                showResult('processResult', `✗ 错误: ${error.message}`, 'error');
            } finally {
                showLoading('processLoading', false);
            }
        }
        
        // 获取待处理记录
        async function getPendingRecords() {
            try {
                const response = await fetch(`${API_BASE}/api/process/pending?limit=20`);
                const data = await response.json();
                
                if (data.success) {
                    let message = `<strong>待处理记录 (${data.count} 条)</strong><br><br>`;
                    
                    if (data.count === 0) {
                        message += '暂无待处理记录';
                    } else {
                        data.data.forEach(record => {
                            message += `ID: ${record.id} - ${record.name}<br>`;
                        });
                    }
                    
                    showResult('processResult', message, 'info');
                }
            } catch (error) {
                showResult('processResult', `✗ 错误: ${error.message}`, 'error');
            }
        }
        
        // 获取待审核记录
        async function getPendingAudit() {
            try {
                const response = await fetch(`${API_BASE}/api/audit/pending?page=1&pageSize=20`);
                const data = await response.json();
                
                if (data.success) {
                    let message = `<strong>待审核记录</strong><br><br>`;
                    message += `总数: ${data.pagination.total}<br>`;
                    message += `当前页: ${data.pagination.page}/${data.pagination.totalPages}<br><br>`;
                    
                    if (data.data.length === 0) {
                        message += '暂无待审核记录';
                    } else {
                        data.data.forEach(record => {
                            message += `ID: ${record.id} - ${record.name} (${record.position || ''})<br>`;
                        });
                    }
                    
                    showResult('auditResult', message, 'info');
                }
            } catch (error) {
                showResult('auditResult', `✗ 错误: ${error.message}`, 'error');
            }
        }
        
        // 页面加载时检查健康状态
        window.addEventListener('load', () => {
            checkHealth();
            getStatistics();
        });
    </script>
</body>
</html>


